<script setup>
import { ref, onMounted } from 'vue'
import axios from "axios";
import Back from "../components/BackNavbar.vue";
var rate = 0;
var datas = ref([]);
var total = 0;
var total_str = ref(0);
var BTCs = [];
var total_btc_str = ref(0);

var rate = 7.00;

for (var i = 0; i < datas.length; i++) {
  total = total + datas[i].qty;
  BTCs.push((datas[i].qty / rate).toFixed(2));
  total_btc = total_btc + datas[i].qty / rate;
}

//获取数字货币
import { getUserMessage, getUserCurrency } from '../apis/api.js'
const getCurrency = () => {
  getUserCurrency().then(res => {
    console.log(res)
    datas.value = res.data.data

  })
}
//获取用户余额
const getUserBalance = () => {
  getUserMessage().then(res => {
    //console.log(res)
    total_str.value = res.data.data.userBalance
    total_btc_str.value = res.data.data.userBalance / 7.31
  })
}
//百分比转换函数
const percentToDecimal = (percentStr) => {
  //console.log(percentStr)
  // 去除百分号
  const cleanedStr = percentStr.replace(/%/g, '');
  // 转换为浮点数并除以100
  const decimalValue = parseFloat(cleanedStr) / 100;
  return decimalValue;
}
//保留两位小数
const Decimal = (number) => {
  // 保留两位小数
  const formattedValue = number.toFixed(2);
  return parseFloat(formattedValue);
}

onMounted(() => {
  getCurrency()
  getUserBalance()
})
</script>

<template>
  <div class="account">
    <Back :title="'现货账户'"></Back>
    <div class="card_hd">
      <table>
        <tr>
          <td>现货账户(CNY)</td>
          <!--<td style="text-align: right"><img src="../../assets/icon/footer-wallet/eye02.png" /></td>-->
        </tr>
      </table>
      <h2>{{ total_str }}</h2>
      <p>≈{{ total_btc_str }} BTC</p>
    </div>
    <div class="hd_table">
      <table>
        <tr>
          <td style="padding-left: 10px ">小额资产兑换GT</td>
          <td style=""> > </td>
        </tr>
      </table>
    </div>
    <div class="mid">
      <!--<div class="mid_hd">
        <div class="mid_hd_div" id="div1"> <img src="../../assets/icon/footer-wallet/account/bingo.png" /> 隐藏小额资产</div>
        <div class="mid_hd_div" id="div2"><img src="../../assets/icon/footer-wallet/account/search.png" /><input
            type="text" placeholder="搜索" /></div>
      </div>-->
      <hr />
      <div class="list" v-for="data of datas" :key="data.id">
        <table class="list_tab01">
          <tr>
            <td width="8%"><img :src="'/src/' + data.img" /></td>
            <td>{{ data.name }}</td>
          </tr>
          <!--<tr>
            <td style="color: #B7B7B7;font-size: x-small;">点卡点数</td>
          </tr>
          <tr>
            <td colspan="2">{{ data.qty }}<span>≈{{ BTCs[i] }}</span></td>
          </tr>-->
        </table>
        <table class="list_tab02">
          <tr>
            <td>可用/锁定</td>
            <td>最新价/成本</td>
            <td style="text-align: right;">今日/累计盈亏</td>
          </tr>
          <tr>
            <td>{{ data.quantity }}</td>
            <td>￥{{ data.price }}</td>
            <td style="text-align: right">￥{{ data.total }}</td>
          </tr>
          <tr>
            <td>{{ data.quantity }}</td>
            <td>￥{{ Decimal(data.price * percentToDecimal(data.upAndDown)) }}</td>
            <td style="text-align: right">￥{{ Decimal(data.quantity * data.price * percentToDecimal(data.upAndDown)) }}
            </td>
          </tr>
        </table>
        <div class="button">
          <div style="border-right:1px solid #979797">理财</div>
          <div routerLink="/footer-wallet-account-bill">账单</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.account {
  display: flex;
  flex-direction: column;
  width: 500px;

}

.header {}

.header table {
  margin: 0 auto;
  width: 95%;
  height: 40px;
}

.header table img {
  width: 15px;
  height: 15px;
}

.card_hd {
  width: 90%;
  margin: 0 auto;
  margin-top: 15px;
  padding: 5px 5px 10px 5px;
  box-shadow: 0px 1px 1px 0px gainsboro;
  background-color: #F9FAFC;
  border-radius: 10px;
}

.card_hd table img {
  width: 20px;
  height: 20px;
}

.card_hd table {
  margin: 0 auto;
  width: 95%;
  font-size: x-small;
  margin-top: 10px;
}

.card_hd h2 {
  margin-bottom: 10px;
  margin-left: 10px;
}

.card_hd p {
  margin-top: -5px;
  font-size: xx-small;
  margin-left: 10px;
}

.hd_table {
  width: 95%;
  height: 40px;
  margin: 0 auto;
  margin-top: 10px;
  box-shadow: 0px 10px 0px gainsboro;
}

.hd_table table {
  margin: 0 auto;
  width: 95%;
  height: 30px;
  background-color: #FEECEA;
  border-radius: 20px;
  color: #E53C3D;
  font-size: small;
}

.mid {
  width: 500px;
  margin-top: 20px;
}

.mid_hd {
  display: flex;
  justify-content: space-around;
}

.mid_hd_div {
  color: #B7B7B7;
  font-size: x-small;
}

#div1 {
  height: 30px;
  width: 150px;
  text-align: left;
  line-height: 30px;
}

.mid_hd_div img {
  vertical-align: middle;
}

.mid_hd_div input {
  border: none;
  outline: none;
  width: 80px;
}

#div2 {
  height: 25px;
  text-align: center;
  line-height: 25px;
  border: 1px solid grey;
  border-radius: 10px;
}

.mid_hd img {
  width: 18px;
  height: 18px;
}

.hr {
  border: 1px solid darkgrey;
  opacity: 0.1;
}

.list {
  width: 98%;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 0px 2px 1px slategray;

}

.list_tab01 {
  width: 95%;
  margin: 0 auto;

}

.list_tab01 img {
  width: 30px;
  height: 30px;
}

.list_tab01 span {
  font-size: x-small;
  color: #B7B7B7;
}

.list_tab02 {
  margin: 0 auto;
  margin-top: 5px;
  width: 90%;
  font-size: 12px;
}

.button {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  height: 30px;
  background-color: #F6F6F6;
}

.button div {
  text-align: center;
  line-height: 30px;
  width: 50%;
}
</style>